<template>
	<scroll-view scroll-x="true" scroll-y="true" >
		<!-- table -->
		<view class="table-wrapper">
			<view ref="table" class="my-table mb10">
				<!-- 顶部冻结，左侧不冻结 -->
				<view class="center-table" style="overflow: hidden;">
					<thead id="centerTableHead" ref="centerTableHead" class="table-head table-head-fixed">
						<tr>
							<td v-for="(header,index) in actualTableHead" :key="index">
								{{header}}
							</td>
						</tr>
					</thead>
					
					<tbody ref="centerTableBody" class="table-body table-body-fixed" >
						<tr v-for="(row,index) in tableData" :key="index">
							<td v-for="(header,index3) in actualTableHead" :key="index3">
								{{header}}
							</td>
						</tr>
					</tbody>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "gzyTopLeftFixableTable",
		data() {
			return {
				tableLoading: false,
				preViewX: 0,
				movedViewX: 0,
				leftTableWidth: 0,
				headerHeight: 0,
				maxScrollWidth: 0,
actualTableHead:[123,123,213,4123,412,412,41,234,123,54123,35412,34,123,4123,41,234,12,412,4,124,1,2,412412,4,1234,123,4123,412,34,1234,123,4],
tableData:[1234,12,421,4,2135,2345,34,6,3456,3456,4356345,6345,64,356,3456,3456,34567,345,6324,1234,12,421,4,2135,2345,34,6,3456,3456,4356345,6345,64,356,3456,3456,34567,345,6324,]
			}
		},
		computed: {

		},
		watch: {
			tableList() {
				this.tableData = this.tableList
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	/** table通用样式 **/
	
	table::-webkit-scrollbar { /* 去掉表格的重复边框 */
		display: none;
	}
	
	th, td {
		overflow: hidden;
		background-color: #fff;
		border-left: 2rpx solid #dedede;
		border-right: 2rpx solid #dedede;
	}

	.table-wrapper {
		/* margin-bottom: 10px; */
		/* padding: 0 10rpx; */
		overflow: scroll;
	}

	/* 表头 */
	.table-head {
		/* overflow: scroll; */
		/* overflow: hidden; */
		text-align: center;
		white-space: nowrap;
		background-color: white;
		/* height: 29px;
		line-height: 19px; */
		vertical-align: middle;
		color: black;
		border-bottom: 2rpx solid #444444;
	}
	
	.my-table {
		/* overflow-y: scroll; */
		/* overflow-y: hidden;
		height: 100%; */
		border-collapse: collapse;
		border-spacing: 0;
		position: relative;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		
		z-index: 3;
	}
	
	tr {
		width: 100%;
		border-top: 2rpx solid #dedede;
		border-bottom: 2rpx solid #dedede;
	}
	
	.table-body tr:nth-child(1) {
		border-top: none;
	}
	
	.left-table tr, .table-head tr {
		border-color: #444444;
	}
	
	.left-table td, .table-head td {
		background-color: #fff;
		border-left: 2rpx solid #444444;
		border-right: 2rpx solid #444444;
	}
	
	.my-td-p {
		text-align: center;
		color: #5c5858;
		font-weight: 400;
		font-size: 15px;
		
		display: inline-block;
		/* line-height: 40rpx; */
		height: 24px;
		line-height: 24px;
		padding: 4rpx 4rpx;
		margin: auto 0;
		vertical-align: middle;
		overflow: hidden;
		overflow-x: scroll;
		min-width: 80rpx;
		
		word-break: keep-all;
		white-space: nowrap;
	}
	
	.table-head-fixed {
		position: fixed;
		overflow: scroll;
	}
	
	/** 左右table样式  **/

	.left-table {
		z-index: 3;
		background-color: #fff;
		position: relative;
		    /* width: 100%; */
		/* position: absolute; */
		/* left: 250px; */
		/* float: left; */
		display: flex;
		flex-direction: column;
	}
	
	.left-table .table-head-fixed {
		z-index: 4;
	}
	
	.center-table {
		z-index: 1;
		background-color: #fff;
		/* position: relative; */
		
		/* float: left; */
		width: 100%;
		overflow: scroll;
		
		display: flex;
		flex-direction: column;
	}
	
	.center-table .table-head-fixed {
		z-index: 2;
	}
</style>

<!-- 本页⾯⽤到个⼈ common公共样式 -->
<style scoped>
	.mb10 {
		margin-bottom: 20rpx;
	}
</style>
